<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../../store/useAuthStore'
import { ElMessage } from 'element-plus'
import { Lock } from '@element-plus/icons-vue'
import { changePassword } from '../../api/user'
import type { ChangePasswordRequest } from '../../api/user'

const router = useRouter()
const authStore = useAuthStore()

const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 表单引用
const formRef = ref()
const isSubmitting = ref(false)

// 自定义校验密码一致性
const validatePasswordMatch = (rule: any, value: string, callback: any) => {
  if (value !== passwordForm.newPassword) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

// 表单验证规则
const rules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' },
    { min: 6, max: 30, message: '密码长度应为6-30个字符', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 30, message: '密码长度应为6-30个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    { validator: validatePasswordMatch, trigger: ['blur', 'change'] }
  ]
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    isSubmitting.value = true
    
    // 准备请求参数
    const passwordData: ChangePasswordRequest = {
      currentPassword: passwordForm.currentPassword,
      newPassword: passwordForm.newPassword
    }
    
    try {
      // 调用修改密码API
      const response = await changePassword(passwordData)
      console.log('密码修改响应:', response)
      
      if (response.data && response.data.success) {
        ElMessage.success(response.data.message || '密码修改成功')
        // 清空表单
        passwordForm.currentPassword = ''
        passwordForm.newPassword = ''
        passwordForm.confirmPassword = ''
      } else {
        ElMessage.error(response.data?.message || '密码修改失败，请稍后再试')
      }
    } catch (error: any) {
      console.error('密码修改请求失败:', error)
      if (error.response?.status === 401) {
        ElMessage.error('当前密码不正确')
      } else if (error.response?.data?.message) {
        ElMessage.error(error.response.data.message)
      } else {
        ElMessage.error('密码修改失败，请稍后再试')
      }
    }
    
  } catch (error) {
    console.error('表单验证失败', error)
  } finally {
    isSubmitting.value = false
  }
}

// 重置表单
const resetForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
}
</script>

<template>
  <div class="security-page">
    <div class="container">
      <div class="page-header">
        <h1>密码修改</h1>
        <p>定期更新密码，保障您的账户安全</p>
      </div>
      
      <div class="security-layout">
        <!-- 安全提示卡片放在顶部 -->
        <div class="security-tips">
          <h3>安全提示</h3>
          <div class="divider"></div>
          <ul>
            <li>
              <div class="tip-icon"><i class="el-icon-refresh"></i></div>
              <div class="tip-content">
                <strong>定期更换密码</strong>
                <p>建议每3个月更新一次密码</p>
              </div>
            </li>
            <li>
              <div class="tip-icon"><i class="el-icon-lock"></i></div>
              <div class="tip-content">
                <strong>使用强密码</strong>
                <p>结合大小写字母、数字和特殊字符</p>
              </div>
            </li>
            <li>
              <div class="tip-icon"><i class="el-icon-warning"></i></div>
              <div class="tip-content">
                <strong>避免重复使用</strong>
                <p>不要与其他网站使用相同的密码</p>
              </div>
            </li>
            <li>
              <div class="tip-icon"><i class="el-icon-user"></i></div>
              <div class="tip-content">
                <strong>保护隐私</strong>
                <p>不要与他人分享您的密码</p>
              </div>
            </li>
          </ul>
        </div>
        
        <!-- 修改密码表单放在下面 -->
        <div class="card">
          <div class="card-header">
            <h2>修改密码</h2>
            <p>请输入您的当前密码和新密码</p>
          </div>
          <div class="card-body">
            <el-form
              ref="formRef"
              :model="passwordForm"
              :rules="rules"
              label-position="top"
              class="password-form"
              :hide-required-asterisk="true"
              :status-icon="false"
              @keyup.enter="handleSubmit"
            >
              <el-form-item label="当前密码" prop="currentPassword">
                <el-input
                  v-model="passwordForm.currentPassword"
                  type="password"
                  placeholder="请输入当前密码"
                  show-password
                  :prefix-icon="Lock"
                />
              </el-form-item>
              
              <el-form-item label="新密码" prop="newPassword">
                <el-input
                  v-model="passwordForm.newPassword"
                  type="password"
                  placeholder="请输入新密码"
                  show-password
                  :prefix-icon="Lock"
                />
              </el-form-item>
              
              <el-form-item label="确认新密码" prop="confirmPassword">
                <el-input
                  v-model="passwordForm.confirmPassword"
                  type="password"
                  placeholder="请再次输入新密码"
                  show-password
                  :prefix-icon="Lock"
                />
              </el-form-item>
              
              <div class="form-actions">
                <el-button
                  type="primary"
                  :loading="isSubmitting"
                  @click="handleSubmit"
                  class="submit-btn"
                >
                  修改密码
                </el-button>
                <el-button @click="resetForm" class="reset-btn">重置</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.security-page {
  padding: 2rem 0;
  background-color: #f6f8fa;
  min-height: calc(100vh - 64px);
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.page-header {
  margin-bottom: 2.5rem;
  text-align: center;
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-header h1 {
  font-size: 2.5rem;
  color: #1a1a1a;
  margin-bottom: 0.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, #13c2c2, #36cfc9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-header p {
  color: #606266;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

.security-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  margin-bottom: 2.5rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 1.75rem 2.5rem;
  border-bottom: 1px solid #f0f2f5;
  background-color: #f9fafb;
}

.card-header h2 {
  margin: 0 0 0.5rem 0;
  color: #1a1a1a;
  font-size: 1.5rem;
  font-weight: 600;
}

.card-header p {
  margin: 0;
  color: #909399;
  font-size: 1rem;
}

.card-body {
  padding: 2.5rem;
}

.password-form {
  max-width: 550px;
  margin: 0 auto;
}

.password-form :deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

.password-form :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  transition: all 0.3s;
  border-radius: 8px;
  padding: 0 12px;
}

.password-form :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #13c2c2 inset;
}

.password-form :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #13c2c2 inset !important;
}

.password-form :deep(.el-input__inner) {
  height: 44px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.submit-btn {
  padding: 0 2.5rem;
  height: 44px;
  border-radius: 8px;
  font-size: 1rem;
  background: linear-gradient(135deg, #13c2c2, #36cfc9);
  border: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 10px rgba(19, 194, 194, 0.2);
}

.submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(19, 194, 194, 0.3);
}

.reset-btn {
  padding: 0 2.5rem;
  height: 44px;
  border-radius: 8px;
  font-size: 1rem;
  border: 1px solid #dcdfe6;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  border-color: #13c2c2;
  color: #13c2c2;
}

.security-tips {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  padding: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 0.5rem;
}

.security-tips:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.security-tips h3 {
  margin: 0 0 1.25rem 0;
  color: #1a1a1a;
  font-size: 1.35rem;
  font-weight: 600;
  text-align: center;
}

.divider {
  height: 3px;
  width: 60px;
  background: linear-gradient(135deg, #13c2c2, #36cfc9);
  margin: 0 auto 1.5rem;
  border-radius: 3px;
}

.security-tips ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.security-tips li {
  display: flex;
  align-items: flex-start;
  flex: 1 1 45%;
  min-width: 250px;
  padding: 1rem;
  transition: transform 0.3s ease;
  background-color: #fafafa;
  border-radius: 8px;
}

.security-tips li:hover {
  transform: translateY(-5px);
  background-color: #f0f7f7;
}

.tip-icon {
  flex: 0 0 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(19, 194, 194, 0.1), rgba(54, 207, 201, 0.1));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #13c2c2;
  font-size: 18px;
  margin-right: 1rem;
}

.tip-content {
  flex: 1;
}

.tip-content strong {
  display: block;
  color: #303133;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.tip-content p {
  margin: 0;
  color: #909399;
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
  
  .card-header, .card-body {
    padding: 1.5rem;
  }
  
  .form-actions {
    flex-wrap: wrap;
  }
  
  .submit-btn, .reset-btn {
    width: 100%;
  }
  
  .security-tips ul {
    flex-direction: column;
  }
  
  .security-tips li {
    flex: 1 1 100%;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 1rem;
  }
  
  .page-header {
    margin-bottom: 1.5rem;
  }
  
  .page-header h1 {
    font-size: 1.75rem;
  }
  
  .security-tips h3 {
    font-size: 1.25rem;
  }
}
</style>